<template>
  <div class="box">
    <div class="cai">猜你喜欢</div>
    <div class="hang">
        <span v-for="(item,index) in daoh" :key="index" :class="{h1:true,active:currentIndex==index}" @click="handel(index)">{{item.text}}</span>
    </div>
    <div class="hang2">
        <span v-for="(it,ind) in daoha" :key="ind" class="h2">{{it.text}}</span>
    </div>
    <div class="rong">
    <div class="he" v-for="(i,j) in das" :key="j">
        <div class="p1"><img :src="i.picUrl" alt=""></div>
        <div class="p2">
        <div class="ph1">
            <span>{{i.name}}</span>
            <span class="iconfont icon-gengduo"></span>
        </div>
        <div class="ph2">
            <span class="iconfont icon-pingfen">4.5</span>
            <span>{{i.monthSalesTip}}</span>
        </div>
        <div class="ph3">
            <span>{{i.minPriceTip}}</span>
            <span>{{i.shippingFeeTip}}</span>
            <span>{{i.deliveryTimeTip}}</span>
            <span>{{i.distance}}</span>
        </div>
        <div class="ph4">{{i.wmPoiScore}}</div>
        <div class="ph5" >
            <div  class="zxc">
           <span v-for="(item,index) in i.discounts2" :key="index" class="cla">{{item.info}}</span>
            </div>
            <!-- <span class="iconfont icon-xiangxia"></span> -->
        </div>
        </div>
    </div>
    </div>
  </div>
</template>

<script>
import {user_login,user_register,shop_list} from '../api/index'
export default {
    data(){
        return{
            currentIndex:0,
            daoh:[
                {id:1,text:'综合排序'},
                {id:2,text:'距离最近'},
                {id:3,text:'销量最高'},
                {id:4,text:'筛选'},
            ],
            daoha:[
                {id:1,text:'年货节热卖'},
                {id:2,text:'津贴联盟'},
                {id:3,text:'满减优惠'},
                {id:4,text:'品质联盟'},
            ],
            das:[ ]
        }
    },
    methods:{
        handel(index){
this.currentIndex=index

if(index==1){
    this.das.sort((a,b)=>{
return parseFloat(a.distance)-parseFloat(b.distance)
    })
}else if(index==2){
    this.das.sort((a,b)=>{
return parseFloat((b.monthSalesTip).slice(3))-parseFloat((a.monthSalesTip).slice(3))
})
}
        },
    },
    mounted(){
        shop_list().then((res)=>{
            res.data.list.forEach((item) => {
                this.das.push(item)
            });
            console.log(this.das);
           
        })
    }

}
</script>

<style scoped>
.box{
    padding: 10px 15px;
}
.cai{
    font-size: 22px;
    font-weight: bold;
}
.hang{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.h1{
    font-size: 20px;
}
.h1.active{
    color: red;
}
.hang2{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.h2{
    display: inline-block;
    padding: 10px;
    font-size: 16px;
    background-color: #eee;
    border-radius: 3px;
}
.he{
height: 170px;
background-color: ghostwhite;
margin-top: 10px;
display: flex;
}
.p1{
    width: 100px;
    height: 100px;
}
.p2{
    flex: 1;
    margin-left: 10px;
}
img{
    width: 100%;
}
.ph5{
    display: flex;
}
.ph1{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.ph1 span:nth-child(1){
    font-weight: bold;
    font-size: 16px;
   
}
.ph2 span:nth-child(1){
   color: red;
   
}
.ph2 span{
    margin-right: 20px;
}
.ph3{
    margin-top: 5px;
    margin-bottom: 5px;
}
.ph3 span{
    margin-right: 14px;
}
.ph3 span:nth-child(4){
    margin-right: 0px;
}
.cla{
    display: inline-block;
    background-color: darkorange;
    border-radius: 3px;
    color: white;
    margin-right: 10px;
    margin-bottom: 5px;
}
</style>